<template>
    <div class="login">
      <div class="mylogin" align="left">
        <div style="text-align: left;font-weight: 500;font-size: 24px;">欢迎使用鼎智</div>
        <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="0px"
        >
          <el-form-item label="" prop="account" style="margin-top: 30px;">
            <el-row>
              <el-col :span="24">
                <el-input
                  class="inps"
                  placeholder="账号"
                  v-model="loginForm.account"
                >
                 <div slot="prefix" style="height: 100%;display: flex;align-items: center;justify-content: center;margin-left: 10px">
                  <div  class="prefix-icon"></div>
                </div>
                </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="" prop="passWord">
            <el-row>
              <el-col :span="24">
                <el-input
                  class="inps"
                  type="password"
                  placeholder="密码"
                  v-model="loginForm.passWord"
                >
                <div slot="prefix" style="height: 100%;display: flex;align-items: center;justify-content: center;margin-left: 10px">
                  <div  class="prefix-icon1"></div>
                </div>
              </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="" prop="passWord">
            <el-row>
              <el-col :span="24">
                <el-input
                  class="inps"
                  type="password"
                  placeholder="密码"
                  v-model="loginForm.passWord"
                >
                <div slot="prefix" style="height: 100%;display: flex;align-items: center;justify-content: center;margin-left: 10px">
                  <div  class="prefix-icon2"></div>
                </div>
              </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="" prop="passWord">
            <el-row>
              <el-col :span="24">
                <el-input
                  class="inps"
                  type="password"
                  placeholder="密码"
                  v-model="loginForm.passWord"
                >
                <div slot="prefix" style="height: 100%;display: flex;align-items: center;justify-content: center;margin-left: 10px">
                  <div  class="prefix-icon3"></div>
                </div>
              </el-input>
              </el-col>
            </el-row>
          </el-form-item>
          <div class="unlogin">
            忘记密码?
          </div>
          <el-form-item style="margin-top: 21px">
            <el-button type="primary" round class="submitBtn" style="border-radius: 8px;" @click="submitForm">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-row>
                <el-col :span="2">
                <el-checkbox v-model="checked"></el-checkbox>
              </el-col>
              <el-col :span="22" style="margin-left: -20px;">
                我已阅读并同意《用户协议》和《隐私政策》
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </template>

<script>
// import { mapMutations } from "vuex";
 
export default {
  name: "Login",
  data: function () {
    return {
      loginForm: {
        account: "",
        passWord: "",
      },
      checked:false,
      loginRules: {
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        passWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
 
  methods: {
    // ...mapMutations(["changeLogin"]),
    submitForm() {
      const userAccount = this.loginForm.account;
      const userPassword = this.loginForm.passWord;
      this.$store.commit('SET_USERID',1);
      console.log('userId',this.$store.getters.getUserId)
        // 关闭当前页面
      this.$store.dispatch("/login")
        // 跳转到首页
      this.$router.push({ path: '/' })
      if (!userAccount) {
        return this.$message({
          type: "error",
          message: "账号不能为空！",
        });
      }
      if (!userPassword) {
        return this.$message({
          type: "error",
          message: "密码不能为空！",
        });
      }
      console.log("用户输入的账号为：", userAccount);
      console.log("用户输入的密码为：", userPassword);
      
    },
  },
};
</script>


<style lang="less">
  .login {
    width: 100vw;
    padding: 0;
    margin: 0;
    height: 100vh;
    font-size: 16px;
    background-position: left top;
    background-image: url('../assets/img/login.png');
    background-size: cover; /* 确保图像覆盖整个背景区域 */
    background-position: center; /* 图像居中对齐 */
    background-repeat: no-repeat; /* 防止图像重复 */
    color: #fff;
    position: relative;
  }
 
  .mylogin {
    width: 358px;
    height: 470px;
    position: absolute;
    top: 0;
    right: 15%;
    bottom: 0;
    margin: auto;
    padding: 26px 40px 40px 40px;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }
 
  .inps input {
    height: 45px;
    border: none;
    color: #000;
    font-size: 16px;
    border-radius: 8px;
  }
 
  .submitBtn {
    background-color: transparent;
    color: #39f;
    height: 45px;
    background: #0052D9;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 400;
    width: 100%;
  }
  .unlogin{
    font-size: 14px;
    color: #FFFFFF;
  }
  .prefix-icon{
    width: 24px;
    height: 24px;
    background-image: url('../assets/img/login/name.png');
    background-size: cover; /* 确保图像覆盖整个背景区域 */
    background-position: center; /* 图像居中对齐 */
    background-repeat: no-repeat; /* 防止图像重复 */
  }
  .prefix-icon1{
    width: 24px;
    height: 24px;
    background-image: url('../assets/img/login/number.png');
    background-size: cover; /* 确保图像覆盖整个背景区域 */
    background-position: center; /* 图像居中对齐 */
    background-repeat: no-repeat; /* 防止图像重复 */
  }
  .prefix-icon2{
    width: 24px;
    height: 24px;
    background-image: url('../assets/img/login/tel.png');
    background-size: cover; /* 确保图像覆盖整个背景区域 */
    background-position: center; /* 图像居中对齐 */
    background-repeat: no-repeat; /* 防止图像重复 */
  }
  .prefix-icon3{
    width: 24px;
    height: 24px;
    background-image: url('../assets/img/login/pass.png');
    background-size: cover; /* 确保图像覆盖整个背景区域 */
    background-position: center; /* 图像居中对齐 */
    background-repeat: no-repeat; /* 防止图像重复 */
  }
  .el-input--prefix .el-input__inner{
    padding-left: 50px;
  }
</style>